// 产品详情信息
<template>
  <div>
    <ContainerSlot>
      <template slot="searchModule" />
      <template slot="operationModule">
        <el-button type="primary" plain icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      </template>
      <template slot="contentModule">
        <div class="content">
          <div class="header">
            <div class="title">{{ infoDate.productTitle }}</div>
            <div class="feature">
              <div class="left">产品特色：</div>
              <div class="right">
                {{ infoDate.productContent }}
              </div>
            </div>
          </div>
          <div class="main">
            <!-- <img v-show="infoDate.imgList.length==0" src="../images/productinfo.jpg" alt=""> -->
            <div v-for="item in infoDate.imgList" :key="item.productId" class="mainItem">
              <img v-show="item.productId" :src="item.productImgUrl" alt="">
            </div>
          </div>
        </div>
      </template>
      <template slot="footerModule" />
    </ContainerSlot>
  </div>
</template>
<script>
import ContainerSlot from '@/components/Container'
export default {
  name: '',
  components: { ContainerSlot },
  props: {
    infoDate: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {}
  },
  mounted () {
    console.log(this.infoDate, 'as')
  },
  methods: {
    goBack () {
      this.$emit('getScene', 0)
    }
  }
}
</script>
<style lang='scss' scoped>
.content {
  width: 100%;
  height: 100%;
  overflow: auto;

  .header {
    padding: 16px 20px;
    background: #d6ebfe;
    border-radius: 5px 5px 0 0;

    .title {
      text-align: center;
      font-size: 25px;
      color: #00274d;
    }

    .feature {
      display: flex;
      margin-top: 32px;
      font-size: 16px;
      color: #363636;

      .left {
        width: 84px;
      }

      .right {
        flex: 1;
        height: 34px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }

  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    padding-top: 2%;
    padding-left: 2%;

    .mainItem {
      height: 160px;
      margin-bottom: 20px;
      margin-right: 2.3%;

      // width: 31%;
      img {
        width: 100%;
        height: 100%;
      }
    }

  }
}</style>
